<template>
  <el-container>
    <el-main>
      <el-button v-if="btnPermission.updateOrAddMenu" type="primary" round @click="menuAdd">菜单增加</el-button>
      <el-table v-if="btnPermission.menuList" v-loading="loading" :data="tableData" row-key="id" style="width: 95%" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="title" label="名称" />
        <el-table-column prop="path" label="地址" />
        <el-table-column prop="component" label="路径" />
        <el-table-column prop="redirect" label="重定向" />
        <el-table-column prop="hidden" label="是否按钮" :formatter="isHidden" align="center" />
        <el-table-column prop="alwaysShow" :formatter="stateFormat" align="center" label="是否菜单" />
        <el-table-column prop="description" label="备注" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateTime" label="修改时间" />
        <el-table-column label="操作" style="width: 220px">
          <template slot-scope="scope">
            <el-button v-if="btnPermission.updateOrAddMenu" size="mini" @click="editMenuBtn(scope.$index, scope.row)">编辑</el-button>
            <el-button v-if="btnPermission.menuDelete" size="mini" type="danger" @click="menuDeleteBtn(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="菜单修改" :visible.sync="centerDialogVisible" width="25%" :close-on-click-modal="false">
        <div>
          <el-form ref="form" :model="menu" label-width="80px">
            <el-form-item v-if="false" label="菜单ID">
              <el-input v-model="menu.id" />
            </el-form-item>
            <el-form-item label="菜单名称">
              <el-input v-model="menu.name" />
            </el-form-item>
            <el-form-item label="菜单图标">
              <el-input v-model="menu.icon" />
            </el-form-item>
            <el-form-item label="菜单标题">
              <el-input v-model="menu.title" />
            </el-form-item>
            <el-form-item label="菜单地址">
              <el-input v-model="menu.path" />
            </el-form-item>
            <el-form-item label="重定向">
              <el-input v-model="menu.redirect" />
            </el-form-item>
            <el-form-item label="菜单路径">
              <el-input v-model="menu.component" />
            </el-form-item>
            <el-form-item label="是否菜单">
              <el-switch
                v-model="menu.alwaysShow"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
            <el-form-item label="是否按钮">
              <el-switch
                v-model="menu.hidden"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
            <el-form-item v-if="btnPermission.updateStatus" label="是否启用">
              <el-switch
                v-model="menu.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
            <el-form-item label="上级菜单">
              <select-tree v-model="selected" :options="options" :props="defaultProps" />
            </el-form-item>
            <el-form-item label="加载顺序">
              <el-input v-model="menu.orders" />
            </el-form-item>
            <el-form-item label="创建者">
              <el-input v-model="menu.createUser" disabled />
            </el-form-item>
            <el-form-item label="菜单备注">
              <el-input v-model="menu.description" />
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialog">确 定</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import { getMenuList, getMenu, updateOrAddMenu, menuDelete } from '@/api/menu'
import SelectTree from '@/components/widget/SelectTree'
export default {
  name: 'Menu',
  components: { SelectTree },
  data() {
    return {
      centerDialogVisible: false,
      loading: true,
      tableData: [],
      menu: [],
      // 默认选中值
      selected: '0',
      // 数据默认字段
      defaultProps: {
        parent: 'parentId', // 父级唯一标识
        value: 'id', // 唯一标识
        label: 'label', // 标签显示
        children: 'children' // 子级
      },
      // 数据列表
      options: [],
      btnPermission: {
        getMenu: false,
        updateOrAddMenu: false,
        menuDelete: false,
        menuList: false
      }
    }
  },
  watch: {
    '$route'() {
      this.getMenuList()
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    async getMenuList() {
      const { data } = await getMenuList()
      this.tableData = data.data[0]
      this.options = [data.data[1]]
      // 按钮权限设置
      const press = data.data[2]
      for (let s = 0; s < press.length; s++) {
        if (!this.btnPermission[press[s]]) {
          this.btnPermission[press[s]] = true
        }
      }
      this.loading = false
    },
    async getMenu(id) {
      const { data } = await getMenu({ id: id })
      this.menu = data.data
    },
    async menuDelete(id) {
      const { msg } = await menuDelete({ id: id })
      this.$message.success(msg)
      this.getMenuList()
    },
    async updateOrAddMenu() {
      this.menu.parentId = this.selected
      const { data } = await updateOrAddMenu(this.menu)
      this.$message.success(data.msg)
      this.getMenuList()
    },
    stateFormat(row) {
      if (row.alwaysShow) {
        return '是'
      } else {
        return '否'
      }
    },
    isHidden(row) {
      if (row.hidden) {
        return '是'
      } else {
        return '否'
      }
    },
    editMenuBtn(index, row) {
      this.centerDialogVisible = true
      this.getMenu(row.id)
      this.selected = row.parentId.toString()
    },
    centerDialog() {
      this.centerDialogVisible = true
      if (this.selected === (this.menu.id === undefined ? 0 : this.menu.id.toString())) {
        this.$message.error('上级菜单不能为本身')
      } else if (this.menu.name === undefined) {
        this.$message.error('请输入菜单名称')
      } else if (this.menu.path === undefined) {
        this.$message.error('请输入请求地址')
      } else {
        this.updateOrAddMenu()
        this.centerDialogVisible = false
      }
    },
    menuAdd() {
      this.menu = {}
      this.centerDialogVisible = true
    },
    menuDeleteBtn(index, row) {
      this.loading = true
      this.$confirm('确认删除么？ 删除后不可用恢复')
        .then(_ => {
          this.menuDelete(row.id)
          setTimeout(() => {
            this.getMenuList()
          }, 1000)
        })
        .catch(_ => {
          this.loading = false
        })
    }
  }
}
</script>
